specialEdit = {
        special_id: '',  //模版id
        moduleObj: {     //模版对象
            number: '',
            classname: '',
            modulehtml: '',
        },
        moduleList:{ //六种模版对应的样式，数字
            1:{number:'一',classname:'mb_01',type: 1,modulenum: 1},
            2:{number:'二',classname:'mb_02',type: 2,modulenum: 2},
            3:{number:'三',classname:'mb_03',type: 3,modulenum: 3},
            4:{number:'四',classname:'mb_04',type: 4,modulenum: 4},
            5:{number:'五',classname:'mb_05',type: 5,modulenum: 1},
            6:{number:'六',classname:'mb_06',type: 6,modulenum: 4},
            7:{number:'七',classname:'mb_07',type: 7,modulenum: 3},
            8:{number:'八',classname:'mb_08',type: 8,modulenum: 4},
            9:{number:'九',classname:'mb_09',type: 9,modulenum: 2},
            10:{number:'十',classname:'mb_010',type: 10,modulenum: 3},
        },
        moduleListData:[], //当前专题中已有的模版数据 
        editIngType:0,
        pageInit: function () {
            var that = this;
            var curId = getQueryString('id'); 
            //curId = 'Z200422144524';                  
            if (curId){                
                this.special_id = curId;
                $('#pageTit').html('编辑专题');               
                this.pageDefaultDataGet();
                this.checkBtnStatus();
            }          
            this.eventBind();
        },
        eventBind: function (){
            var that = this;
            $('.visualizing_right_box').on('click','.active_add', function(){
                var curNum = $(this).attr('data-num');
                if(that.checkBtnStatusNum()){                   
                    that.moduleAdd(Number(curNum));                    
                }else{
                    layer.msg('模块数量已超出', {icon: 1, time: 1000});
                } 
                return false;               
            });

            //模块删除
            $('#mobileScreen').on('click', '.del', function () {
                that.moduleDelete($(this));
            });

            //模块拖动
            $('#mobileScreen').dragMove({  
                limit: true,// 限制在窗口内  
                callback: function($move, $replace){}  
            });  

            $('.chenk_length').keyup(function(){
                checkLength($(this)[0],50)
            });
            
            //专题提交按钮
            $("#formSubmit").on('click',function(){
                if($(this).hasClass('btn-disabled')){                   
                    return false;
                }                 
                
                $("#form-module").validate({
                    rules: {
                        title_tit: {
                            required: true,
                        },
                        title_top: "titleCheck",
                        color_value:"colorCheck"
                    },
                    submitHandler:function(form){
                        var parame = {
                            subName: $('#subName').val(), 
                            subTitle: $('#subTitle').val(),  
                            titleHide: $('#titleHide').is(':checked') ? 1:0,
                            subColor: $('#subColor').val(),     
                            userName: JSON.parse(web.readCookie("loginData")).user.name, 
                        };
                       
                        web.doAjax(root.appversioncontrol.addAppWheelSubject,'post',parame, function(data){
                            if(data.errorCode == 0){                                
                                 location.replace(location.href+"?id="+data.data);
                            }else{
                                layer.msg(data.msg, {icon: 1, time: 1000}); 
                            }
                        },1); 
                }}); 

                            
            });

            //模块编辑
            $('.module_screen').on('click','.edit',function(){
                var curType = $(this).attr('data-type');
                var curIndex = $(this).parents('.visualizing_mb').index();                              
                var url = './moban-0'+curType+'.html?moduleId='+that.special_id +'&pos='+curIndex;
                that.editIngType = curType;
                var title='';
                if($(this).attr('data-mdid')){
                    url+="&mbId="+$(this).attr('data-mdid');
                };
                //subId = modelId;
               if($(this).attr('data-mdid')){
                title='编辑专题';
               }else{
                title='添加专题';
               }
                var index = layer.open({
                    type: 2,
                    title: title,
                    content: url
                });
                layer.full(index);   //全屏打开页面
            });

            //专题页面 保存按钮点击事件
            $('#moduleSubmit').on('click',function(){
                  if(!$(this).hasClass('btn-disabled')){
                    that.specialSubdataGet();                                        
                  }
            })

            // 动态获取底色色值
            $("#subColor").bind("input propertychange change",function(event){
                var value = $(this).val();
                $("#mobileScreen").css("background",value)
            });
        },
        //获取当前编辑的专题数据
        pageDefaultDataGet: function(){
            var that = this;  
            web.doAjax(root.appversioncontrol.searchAfterSubjectModelList,'post',{subId:that.special_id}, function(data){
                if(data.errorCode == 0){
                    that.pageDefaultDataInit(data.data);
                }else{
                    layer.msg(data.msg, {icon: 1, time: 1000}); 
                }
            },1); 
        },
        //编辑专题时，接口返回数据整合
        pageDefaultDataInit:function(data){
            $('#subName').val(data.subName);
            if(data.subTitle && data.subTitle.length>0){
                $('#subTitle').val(data.subTitle);
            }else{
                $('#subTitle').val('');
            }
            if(data.subColor && data.subColor.length>0){
                $('#subColor').val(data.subColor);
                // 颜色渲染
                $("#mobileScreen").css("background",data.subColor)
            }else{
                $('#subColor').val('');
            }
            if(data.titleHide==1){$('#titleHide').prop("checked",true);}else{$('#titleHide').prop("checked",false);}
            this.moduleListData = [];
            if(data.modelList && data.modelList.length>0){                
                for(var i=0;i<data.modelList.length;i++){
                    
                    var curMd = data.modelList[i];
                    var curModuleInfo = JSON.parse(JSON.stringify(this.moduleList[curMd.modelType]));  
                    
                    curModuleInfo.mbout = "";  
                    curModuleInfo.margbottom = "";                  
                    curModuleInfo.modulehtml = "";
                    curModuleInfo.type = curMd.modelType;
                    curModuleInfo.widthvalue = "";
                    if(curMd.modelType ==6){
                        curModuleInfo.mbout = 'visualizing_mb_06all';
                        curModuleInfo.modulenum = curMd.urlList.length;  
                        var wid = curMd.urlList.length*94;
                        curModuleInfo.widthvalue = 'width:'+wid+'px';                    
                    }else if(curMd.modelType ==1){
                        curModuleInfo.mbout = 'visualizing_mb_01';
                    }else if(curMd.modelType ==7){
                        curModuleInfo.mbout = 'visualizing_mb_07';
                    }else if(curMd.modelType ==8){
                        curModuleInfo.mbout = 'visualizing_mb_08';
                    }else if(curMd.modelType ==9){
                        curModuleInfo.mbout = 'visualizing_mb_09';
                    }else if(curMd.modelType ==10){
                        curModuleInfo.mbout = 'visualizing_mb_010';
                    }
                    
                    if(curMd.modelSpace ==0){
                        curModuleInfo.margbottom = 'marg_bottom';
                     }
                   
                    curModuleInfo.mdid = curMd.modelArrayId;                                   
                    for (var j = 0; j < curModuleInfo.modulenum; j++){                         
                        var curInfo = curMd.urlList[j];
                        if(!curInfo){
                            curInfo={
                                modelUrl:'',
                                productTitle:'',
                                productPrice:''
                            }
                        }
                        
                        if(curModuleInfo.type!=5 && curModuleInfo.type!=6){
                            curModuleInfo.modulehtml += "<li><img src='"+curInfo.modelUrl+"'></li>";
                            }else{
                            curModuleInfo.modulehtml += "<li><img src='"+curInfo.modelUrl+"'><span class='name'>"+curInfo.productTitle+"</span><span class='price'>￥"+curInfo.productPrice+"</span></li>";             
                            }                          
                                        
                    };
                    this.moduleListData.push(curModuleInfo);                  

                }
                this.pageDefaultDataIntoPage();
            }
        },
        //编辑专题时，页面数据渲染
        pageDefaultDataIntoPage:function(){
            var curHtml = $('#mobileScreen').html();
            for(var i=0;i<this.moduleListData.length;i++){
                curHtml += template($('#special_tmpl'), this.moduleListData[i]);
            }
            $('#mobileScreen').html(curHtml);
            this.emptyModuleHide();
        },
        //按钮状态判断
        checkBtnStatus:function(){
            if(this.special_id != ''){
                $('#formSubmit').addClass('btn-disabled');
                $('.mb_btn_add').addClass('active_add');
                $('#moduleSubmit').removeClass('btn-disabled');
            }else{
                $('#formSubmit').removeClass('btn-disabled');
                $('.mb_btn_add').removeClass('active_add');
                $('#moduleSubmit').addClass('btn-disabled');
            }
        },
        //专题内模版数量限制
        checkBtnStatusNum:function(){
            var curNum = $('.module_screen').find('.visualizing_mb:visible').length;           
            if(curNum>=50){
                $('.mb_btn_add').removeClass('active_add'); 
                return false;
            }else{
                $('.mb_btn_add').addClass('active_add'); 
                return true;
            }
        },
        //空模版的添加
        moduleAdd:function (num){
            var curModuleInfo = this.moduleList[num];
            if (num == 6) {
                curModuleInfo.mbout = 'visualizing_mb_06all';
            } else if(num == 1) {
                curModuleInfo.mbout = 'visualizing_mb_01';
            }else if(num == 7){
                curModuleInfo.mbout = 'visualizing_mb_07';
            }else if(num == 8){
                curModuleInfo.mbout = 'visualizing_mb_08';
            }else if(num == 9){
                curModuleInfo.mbout = 'visualizing_mb_09';
            }else if(num == 10){
                curModuleInfo.mbout = 'visualizing_mb_010';
            }else{
                curModuleInfo.mbout = '';
            }
            
            curModuleInfo.modulehtml = "";
            for (var i = 0; i < curModuleInfo.modulenum; i++) {
                curModuleInfo.modulehtml += "<li></li>";
            };
            curModuleInfo.type= Number(num); 
            var addModuleHtml = template($('#special_tmpl'), curModuleInfo);            
            var curHtml = $('#mobileScreen').html();           
            $('#mobileScreen').html(curHtml + addModuleHtml);           
            this.emptyModuleHide();           
            this.checkBtnStatusNum();
            
        }, 
        //添加模版样式的显示隐藏 
        emptyModuleHide:function(){
            if ($('#mobileScreen').find('.visualizing_mb').length > 0){
                $('#mobileScreen').find('.special_none').hide();
            } else {
                $('#mobileScreen').find('.special_none').show();
            }
        }, 
        //模块的删除操作     
        moduleDelete: function (_this){
            var that = this;
            var curDiaInd = layer.confirm('确认删除当前模块？', function (index){
                var curId = _this.attr('data-mdid');
                if(curId && curId!=''){
                    _this.parents('.visualizing_mb').attr('data-show',0).hide();
                }else{
                    _this.parents('.visualizing_mb').remove();
                }
                if ($('#mobileScreen').find('.visualizing_mb').length > 0) {
                    $('#mobileScreen').find('.special_none').hide();
                } else {
                    $('#mobileScreen').find('.special_none').show();
                }
                that.checkBtnStatusNum(); 
                layer.close(curDiaInd);               
            });
            
        },
        //单条模块数据获取
        singleModuleDagaGet:function(id,pos){  //模版id，位置
            var that = this;           
            var curTp = that.editIngType;
            web.doAjax(root.special.searchModelMsg, 'post', {'modelArrayId':id,'subId':that.special_id},function(data){
                if(data.errorCode == 0){
                    var curModuleInfo = JSON.parse(JSON.stringify(that.moduleList[curTp]));
                    curModuleInfo.mbout = "";
                    curModuleInfo.modulehtml = "";
                   // curModuleInfo.margbottom = "";
                   curModuleInfo.widthvalue = "";
                    if(curTp ==6){
                        curModuleInfo.mbout = 'visualizing_mb_06all';
                        curModuleInfo.modulenum = data.data.length; 
                        var wid = data.data.length * 94;
                        curModuleInfo.widthvalue = 'width:'+wid+'px';                     
                    }else if(curTp ==1){
                        curModuleInfo.mbout = 'visualizing_mb_01';
                    }else if(curTp == 7){
                        curModuleInfo.mbout = 'visualizing_mb_07';
                    }else if(curTp == 8){
                        curModuleInfo.mbout = 'visualizing_mb_08';
                    }if(curTp == 9){
                        curModuleInfo.mbout = 'visualizing_mb_09';
                    }if(curTp == 10){
                        curModuleInfo.mbout = 'visualizing_mb_010';
                    }
                    var isMargin = true;
                    if(data.data[0].modelSpace==0){
                       // curModuleInfo.margbottom = "marg_bottom";
                        isMargin = false;
                    }
                    curModuleInfo.mdid = data.data[0].modelArrayId;
                     for (var j = 0; j < curModuleInfo.modulenum; j++){                         
                        var curInfo = data.data[j];
                        if(!curInfo){
                            curInfo={
                                modelUrl:'',
                                productTitle:'',
                                productPrice:''
                            }
                        }
                        if(curModuleInfo.type!=5 && curModuleInfo.type!=6){
                            curModuleInfo.modulehtml += '<li><img src="'+curInfo.modelUrl+'"></li>';
                        }else{
                            curModuleInfo.modulehtml += '<li><img src="'+curInfo.modelUrl+'"><span class="name">'+curInfo.productTitle+'</span><span class="price">￥'+curInfo.productPrice+'</span></li>';             
                        }                          
                                        
                    };
                    that.singleModuleDagaInit(pos,curModuleInfo,curModuleInfo.mdid,isMargin);
                }               
           })
        },
        //单条模块数据渲染
        singleModuleDagaInit:function(pos,obj,mdid,isMargin){            
            var curHtml = template($('#special_tmpl_in'), obj);
            var curParOjb = $('#mobileScreen').find('.visualizing_mb').eq(pos-1);
            curParOjb.attr('data-specialid',mdid).html(curHtml);
            if(!isMargin){
                curParOjb.addClass('marg_bottom');
            }else{
                curParOjb.removeClass('marg_bottom');
            }
        },
        //专题保存 参数获取
        specialSubdataGet:function(){           
            var moduleList = $('#mobileScreen').find('.visualizing_mb');
            var models = [];
            var deleteModels = [];
            for(var i=0;i<moduleList.length;i++){
                 var curId = $(moduleList[i]).attr('data-specialid');
                 var curLen = Number(models.length)+1;
                 if(curId && curId !=''){                    
                    if($(moduleList[i]).attr('data-show')==1){
                        models.push({modelArrayId:curId,modelIndex:curLen});
                     }else{
                        deleteModels.push({modelArrayId:curId});
                     }  
                 }
            }
            var subject = {
                    subId:this.special_id,
                    subName: $('#subName').val(), 
                    subTitle: $('#subTitle').val(),  
                    titleHide: $('#titleHide').is(':checked') ? 1:0,
                    subColor: $('#subColor').val(),
                    userName: JSON.parse(web.readCookie("loginData")).user.name,
                }
            if(subject.subName.length<=0){
                layer.msg('请填写专题名称', {icon: 2, time: 1000});
                return false;
            }
            if(!checkLengthVal(subject.subName,50)){
                layer.msg('专题名称超过字符限制', {icon: 2, time: 1000});
                return false;
            }
            if(!checkLengthVal(subject.subTitle,50)){
                layer.msg('顶部标题超过字符限制', {icon: 2, time: 1000});
                return false;
            }
             var colorReg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
             if(subject.subColor.length>0 && !colorReg.test(subject.subColor)){
                layer.msg('请输入正确的色值格式', {icon: 2, time: 1000});
                return false;
             }
            this.specialSubmit(subject,models,deleteModels);
        },
        //专题保存
        specialSubmit:function(subject,models,deleteModels){
            parame = {};            
            parame.subject = subject;
            parame.models = models;
            parame.deleteModels = deleteModels;
            var that = this;
            web.doAjax(root.appversioncontrol.saveModelStatusList,'post',parame, function(data){
                if(data.errorCode == 0){
                    layer.msg("保存成功",{icon: 6,time:1000},function (){
                        if(that.special_id&&that.special_id!=""){
                            parent.fsorderlist(parent.comPageNum);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }else {
                            parent.fsorderlist(1);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }
                    });
                }else{
                    layer.msg(data.msg, {icon: 1, time: 1000}); 
                }
            },1); 
        }
    };
specialEdit.pageInit();
function template(dom, data) {
    var domHmt = dom.html();
    var replaceDom = domHmt.replace(/\{\{([\s\S]+?)\}\}/g, function ($0, $1) {
        return data[$1] || '';
    });
    return replaceDom;
};

$.validator.addMethod("titleCheck", function(value, element) {
    var tel = /^.{1,40}$/;
    return this.optional(element) || (tel.test(value));
}, "输入有误");
$.validator.addMethod("colorCheck", function(value, element) {
    var tel = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
    return this.optional(element) || (tel.test(value));
}, "请按色值格式输入");

function checkLength(dom, maxLength){
    var l = 0;
    for(var i=0; i<dom.value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(dom.value[i])) {
            l+=2;
        } else {
            l++;
        }
        if (l > maxLength) {
            dom.value = dom.value.substr(0,i);
            break;
        }
    }
};

function checkLengthVal(val, maxLength){
    var l = 0;
    for(var i=0; i<val.length; i++){
        if (/[\u4e00-\u9fa5]/.test(val[i])) {
            l+=2;
        } else {
            l++;
        }    
        if (l > maxLength) {
            return false;
        }
    }
    return true;
};
